
<template>
  <div class="my-login">
    <div class="header_body">
      <header-nav :leftArrow="false" titelText=""></header-nav>
    </div>
    <div class="appcontent">
      <div class="title1">账号密码登录</div>
      <div class="title2">个人账户为钉钉工号</div>
      <van-form @submit="onSubmit" style="margin-left:-7%">
        <van-cell-group inset>
          <van-field v-model="result" is-link readonly name="picker" label="磅秤编号" placeholder="点击选择磅秤" @click="showPicker = true" />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
          </van-popup>
          <van-field v-model="FormData.loginName" name="账号" label="账号" placeholder="请输入账号" :rules="[{ required: true, message: '请填写账号' }]" />
          <van-field current-password v-model="FormData.password" :right-icon="passwordStatus ? 'eye' : 'closed-eye'" :type="!passwordStatus ? 'password' : 'text'" @click-right-icon="passwordStatus = !passwordStatus" type="password" name="密码" label="密码" autocomplete placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
          <van-field style="margin-left:15px;font-size:12px;color: #59595D; margin-top:20px" input-align="right" name="checkbox" label="">
            <template #input>
              记住密码
              <van-checkbox style="margin-left:5px" v-model="checked" />
            </template>
          </van-field>
        </van-cell-group>
        <div class="bthos">
          <van-button style="background: #466BB5;border: 1px solid #466BB5;" block type="primary" @click="onSubmit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import headerNav from "@/components/common/headerNav.vue";
import index from "../api/index";
import { ref, reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "My",
  components: {
    headerNav,
  },
  setup() {
    const result = ref("黑河地磅");
    const checked = ref("true");
    const showPicker = ref(false);
    const columns = ["黑河地磅", "黑河三期"];
    const router = useRouter();
    const passwordStatus = ref(false);
    const data = reactive({
      //磅秤选择列表
      deviceList: [],
      FormData: {
        code: "",
        deviceId: "",
        loginName: "admin",
        password: "Hsgy@2022.123",
        uuid: "",
      },
    });
    const methods = reactive({
      //查询设备列表
      async queryAllDevice() {
        const res = await index.queryAllDevice();
        if (res && res.code === 200) {
          data.deviceList = res.data;
          if (res.data.length > 0) {
            data.FormData.deviceId = res.data[0].id;
          }
        }
      },
      onConfirm(value) {
        result.value = value;
        showPicker.value = false;
      },
      async onSubmit() {
        let res = await index.login(data.FormData);
        console.log(res);
        if (res && res.code === 200) {
          let { token, userId } = res;
          localStorage.setItem("token", token);
          localStorage.setItem("userId", userId);
          localStorage.setItem("deviceInfo", JSON.stringify(res.deviceInfo));
          Notify({ type: "success", message: "登录成功" });
          router.push({
            path: "/home",
          });
        } else {
          Notify({ type: "warning", message: "账号或密码错误" });
        }
      },
    });

    onMounted(() => {
      methods.queryAllDevice();
    });
    return {
      passwordStatus,
      router,
      ...toRefs(data),
      ...methods,
      showPicker,
      columns,
      result,
      checked,
    };
  },
};
</script>
<style lang="less" scoped>
.my-login {
  margin: 10px;
}
.appcontent {
  margin-top: 2rem;
  .title1 {
    margin-left: 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: "PingFang SC";
    color: #222229;
    line-height: 30px;
  }
  .title2 {
    margin-left: 10px;
    font-size: 12px;
    font-weight: normal;
    color: #888889;
    line-height: 16px;
    margin-bottom: 10vh;
  }
  .bthos {
    margin: 60px 20px 0 15px;
  }
}
</style>
